<template>
  <div>
  <!--<el-radio-group v-model="isCollapse">-->
    <!--<el-radio-button :label="false">展开</el-radio-button>-->
    <!--<el-radio-button :label="true">收起</el-radio-button>-->
  <!--</el-radio-group>-->
  <el-menu unique-opened  router :default-active="sideIndex" :background-color="theme.asideBgcolor" class="mymenu"
           :text-color="theme.bgcolor" :active-text-color="theme.activeColor" @open="handleOpen" @close="handleClose" >
    <el-submenu  index="/all">
      <p slot="title">
        <i class="el-icon-menu"></i>
        <span slot="title">实时数据概览</span>
      </p>
      <el-menu-item index="/all/statistics"><i class="el-icon-view"></i>统计概览</el-menu-item>
      <el-menu-item index="/all/overseas"><i class="el-icon-view"></i>海外概览</el-menu-item>
    </el-submenu>
    <el-submenu   index="/game">
      <p slot="title">
        <i class="el-icon-menu"></i>
        <span slot="title">游戏数据</span>
      </p>
      <el-submenu  v-for="item in gameList" :key="item.project" :index="'/game/'+item.project_abb">
        <p slot="title">
          <i class="el-icon-star-on"></i>
          <span slot="title">{{item.project_name}}</span>
        </p>
        <el-menu-item :index="'/game/'+item.project_abb+'/realtime'"><i class="el-icon-view"></i>实时数据</el-menu-item>
        <el-menu-item :index="'/game/'+item.project_abb+'/retained'"><i class="el-icon-view"></i>留存数据</el-menu-item>
        <el-menu-item :index="'/game/'+item.project_abb+'/pay'"><i class="el-icon-view"></i>付费数据</el-menu-item>
      </el-submenu>
    </el-submenu>
    <!--<el-menu-item index="/report">-->
      <!--<i class="el-icon-setting"></i>-->
      <!--<span slot="title">日报</span>-->
    <!--</el-menu-item>-->
    <el-menu-item index="/kpi">
      <i class="el-icon-setting"></i>
      <span slot="title">KPI</span>
    </el-menu-item>
  </el-menu>
  </div>
</template>
<style type="text/less" src="../../common/css/mainTheme"></style>
<style lang="scss"  scoped>
  .mymenu {
    padding: 0;
  }
</style>

<script>
  let sideIndex = '/all';
import {mapState,mapGetters} from 'vuex';
  export default {
    data() {
      return {
        isCollapse: false,sideIndex:sideIndex
      };
    },
    computed:{
      ...mapState( {
        gameList: state => state.app.gameList,
        theme: state => state.app.theme,
      })
    },
    created(){
      this.sideIndex = window.document.location.pathname;
    },
    methods: {
      handleOpen(key, keyPath) {

      },
      handleClose(key, keyPath) {

      }
    }
  }
</script>
